<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/leaflet-src.js"></script>
    <link rel="stylesheet" href="../css/leaflet.css">
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        #mapDiv {
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body>
<div id="mapDiv"></div>
<script>
    //TODO:注意事项：
    //TODO 加载点、线、面时也是纬度在前经度在后，加载点时，为一个数组，加载线时为一个数组串（两个[]），加载面时为三个[]。
    //TODO 加载面时，要求第一个点和最后一个点坐标一样才能生成面。
    // TODO 加载圆时，默认radius的单位为米;
    // TODO    加载圆形标注，默认radius单位为像素。它和圆的区别在于地图缩放时候前者随着地图缩放变化，后者不变。

    var map = L.map("mapDiv").setView([36.55, 117.32], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
    L.marker([36.55, 117.32]).addTo(map);
    L.polyline([[36.54, 117.33], [36.55, 117.33], [36.56, 117.35], [36.55, 117.36]]).addTo(map);
    L.polygon([[[36.53, 117.32], [36.51, 117.30], [36.51, 117.33], [36.53, 117.32]]]).addTo(map);
    L.circle([36.52, 117.30], {radius: 200}).addTo(map);
    L.circleMarker([36.54, 117.29], {radius：20
    }).addTo(map);
</script>
</body>
</html>
